<!-- Sale 内容组件 -->
<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <div ref="barchart" class="bar-chart" />
    </el-col>
    <el-col :span="6">
      <div>
        <h3>门店销售额排名</h3>
        <ul class="content-ul">
          <li>
            <span class="one-span sty">1</span>
            <div class="li-rigth">
              <span>肯德基</span>
              <span>332,343</span>
            </div>
          </li>
          <li>
            <span class="one-span sty">1</span>
            <div class="li-rigth">
              <span>肯德基</span>
              <span>332,343</span>
            </div>
          </li>
          <li>
            <span class="one-span">1</span>
            <div class="li-rigth">
              <span>肯德基</span>
              <span>332,343</span>
            </div>
          </li>
        </ul>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import * as echarts from 'echarts'
export default {
  name: 'Content',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var barCharts = echarts.init(this.$refs.barchart)
    barCharts.setOption({
      title: {
        text: '销售额趋势'
      },
      xAxis: {
        // 隐藏x轴
        show: true,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        type: 'category',
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        // 隐藏y轴
        show: true,
        type: 'value'
      },
      // 系列
      series: [
        {
          name: '销售额',
          type: 'bar',
          barWidrh: '60%',
          data: [10, 9, 3, 3, 4, 5, 7, 3, 3]
        }
      ],
      // 布局调试
      grid: {
        left: '50px',
        right: '20px',
        bottom: '20px',
        top: '40px'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      }
    })
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@wh_span: 20px;
.bar-chart{
    height: 40vh;
}
.content-ul{
    list-style-type: none;
    padding: 0;
        li{
            padding: 10px 20px;
            .one-span{
                float: left;
                margin-right: 30px;
                width: @wh_span;
                height: @wh_span;
                text-align: center;
                line-height:@wh_span;
                border-radius: 50%;
            }
            .li-rigth{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
        }
}
// span 颜色样式
.sty{
    background-color: #000000;
    color: #ffffff;
}
</style>
